{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Quick Start\n",
    "Bokeh is an interactive visualization library that targets modern web browsers for presentation. Bokeh provides elegant, concise construction of versatile graphics with high-performance interactivity over very large or streaming datasets in a quick and easy way from Python (or other languages).\n",
    "\n",
    "bokeh.models\n",
    "      A low-level interface that provides the most flexibility to application developers.\n",
    "bokeh.plotting\n",
    "      A higher-level interface centered around composing visual glyphs.\n",
    "This Quickstart focuses on the bokeh.plotting interface"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Getting Started"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "一般用Bokeh创建图表需要以下几步\n",
    "Prepare some data\n",
    "     In this case plain python lists, but could also be NumPy arrays or Pandas series\n",
    "Tell Bokeh where to generate output\n",
    "     In this case using output_file(), with the filename \"lines.html\"; \n",
    "     Another option is output_notebook() for use in Jupyter notebooks.\n",
    "Call figure()\n",
    "      This creates a plot with typical default options and easy customization of title, tools, and axes labels.\n",
    "Add renderers\n",
    "      In this case, we use line() for our data, specifying visual customizations like colors, legends and widths.\n",
    "Ask Bokeh to show() or save() the results.\n",
    "      These functions save the plot to an HTML file and optionally display it in a browser."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.plotting import figure, output_file, show\n",
    "\n",
    "# prepare some data\n",
    "x = [1, 2, 3, 4, 5]\n",
    "y = [6, 7, 2, 4, 5]\n",
    "\n",
    "# output to static HTML file\n",
    "output_file(\"Output//2_1-lines.html\")\n",
    "\n",
    "# create a new plot with a title and axis labels\n",
    "p = figure(title=\"simple line example\", x_axis_label='x', y_axis_label='y')\n",
    "\n",
    "# add a line renderer with legend and line thickness\n",
    "p.line(x, y, legend=\"Temp.\", line_width=2)\n",
    "\n",
    "# show the results\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "\n",
       "    <div class=\"bk-root\">\n",
       "        <div class=\"bk-plotdiv\" id=\"76074380-5631-4022-83d2-aa1ea9b5e742\"></div>\n",
       "    </div>\n",
       "<script type=\"text/javascript\">\n",
       "  \n",
       "  (function(root) {\n",
       "    function now() {\n",
       "      return new Date();\n",
       "    }\n",
       "  \n",
       "    var force = false;\n",
       "  \n",
       "    if (typeof (root._bokeh_onload_callbacks) === \"undefined\" || force === true) {\n",
       "      root._bokeh_onload_callbacks = [];\n",
       "      root._bokeh_is_loading = undefined;\n",
       "    }\n",
       "  \n",
       "  \n",
       "    \n",
       "    if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n",
       "      root._bokeh_timeout = Date.now() + 0;\n",
       "      root._bokeh_failed_load = false;\n",
       "    }\n",
       "  \n",
       "    var NB_LOAD_WARNING = {'data': {'text/html':\n",
       "       \"<div style='background-color: #fdd'>\\n\"+\n",
       "       \"<p>\\n\"+\n",
       "       \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n",
       "       \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n",
       "       \"</p>\\n\"+\n",
       "       \"<ul>\\n\"+\n",
       "       \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n",
       "       \"<li>use INLINE resources instead, as so:</li>\\n\"+\n",
       "       \"</ul>\\n\"+\n",
       "       \"<code>\\n\"+\n",
       "       \"from bokeh.resources import INLINE\\n\"+\n",
       "       \"output_notebook(resources=INLINE)\\n\"+\n",
       "       \"</code>\\n\"+\n",
       "       \"</div>\"}};\n",
       "  \n",
       "    function display_loaded() {\n",
       "      if (root.Bokeh !== undefined) {\n",
       "        var el = document.getElementById(\"76074380-5631-4022-83d2-aa1ea9b5e742\");\n",
       "        if (el != null) {\n",
       "          el.textContent = \"BokehJS \" + Bokeh.version + \" successfully loaded.\";\n",
       "        }\n",
       "      } else if (Date.now() < root._bokeh_timeout) {\n",
       "        setTimeout(display_loaded, 100)\n",
       "      }\n",
       "    }\n",
       "  \n",
       "  \n",
       "    function run_callbacks() {\n",
       "      try {\n",
       "        root._bokeh_onload_callbacks.forEach(function(callback) { callback() });\n",
       "      }\n",
       "      finally {\n",
       "        delete root._bokeh_onload_callbacks\n",
       "      }\n",
       "      console.info(\"Bokeh: all callbacks have finished\");\n",
       "    }\n",
       "  \n",
       "    function load_libs(js_urls, callback) {\n",
       "      root._bokeh_onload_callbacks.push(callback);\n",
       "      if (root._bokeh_is_loading > 0) {\n",
       "        console.log(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n",
       "        return null;\n",
       "      }\n",
       "      if (js_urls == null || js_urls.length === 0) {\n",
       "        run_callbacks();\n",
       "        return null;\n",
       "      }\n",
       "      console.log(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n",
       "      root._bokeh_is_loading = js_urls.length;\n",
       "      for (var i = 0; i < js_urls.length; i++) {\n",
       "        var url = js_urls[i];\n",
       "        var s = document.createElement('script');\n",
       "        s.src = url;\n",
       "        s.async = false;\n",
       "        s.onreadystatechange = s.onload = function() {\n",
       "          root._bokeh_is_loading--;\n",
       "          if (root._bokeh_is_loading === 0) {\n",
       "            console.log(\"Bokeh: all BokehJS libraries loaded\");\n",
       "            run_callbacks()\n",
       "          }\n",
       "        };\n",
       "        s.onerror = function() {\n",
       "          console.warn(\"failed to load library \" + url);\n",
       "        };\n",
       "        console.log(\"Bokeh: injecting script tag for BokehJS library: \", url);\n",
       "        document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
       "      }\n",
       "    };var element = document.getElementById(\"76074380-5631-4022-83d2-aa1ea9b5e742\");\n",
       "    if (element == null) {\n",
       "      console.log(\"Bokeh: ERROR: autoload.js configured with elementid '76074380-5631-4022-83d2-aa1ea9b5e742' but no matching script tag was found. \")\n",
       "      return false;\n",
       "    }\n",
       "  \n",
       "    var js_urls = [];\n",
       "  \n",
       "    var inline_js = [\n",
       "      function(Bokeh) {\n",
       "        (function() {\n",
       "          var fn = function() {\n",
       "            var docs_json = {\"38028149-2e35-4386-8984-d2e61a361246\":{\"roots\":{\"references\":[{\"attributes\":{\"line_color\":{\"value\":\"red\"},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"cb54b7bf-6729-491a-b43d-ae41b2e6872d\",\"type\":\"Line\"},{\"attributes\":{\"num_minor_ticks\":10},\"id\":\"c4de70bc-333e-4643-9764-c71c89f6f3d6\",\"type\":\"LogTicker\"},{\"attributes\":{\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"line_dash\":[4,4],\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"8daa7f00-8873-4dd2-90d6-54539695e8cf\",\"type\":\"Line\"},{\"attributes\":{\"items\":[{\"id\":\"12f50c68-f116-40b9-9e8c-a4dd8d29acee\",\"type\":\"LegendItem\"},{\"id\":\"0b5c54d6-fba3-4490-96f3-b5c99831539b\",\"type\":\"LegendItem\"},{\"id\":\"601c17cb-aaf3-4026-8ff3-e3d5dae4771b\",\"type\":\"LegendItem\"},{\"id\":\"113edf9d-6663-4670-8b72-48de2cf439f6\",\"type\":\"LegendItem\"}],\"plot\":{\"id\":\"4bd7cff3-7315-4abd-8886-e313f3877e67\",\"subtype\":\"Figure\",\"type\":\"Plot\"}},\"id\":\"0e91750c-d9bb-4c64-b8cb-e3547ab30e52\",\"type\":\"Legend\"},{\"attributes\":{\"source\":{\"id\":\"f56a9aa2-4cbf-4e35-8753-64701f78ba4e\",\"type\":\"ColumnDataSource\"}},\"id\":\"ed361d61-574a-4864-89e6-b5d7366fc219\",\"type\":\"CDSView\"},{\"attributes\":{\"dimension\":1,\"plot\":{\"id\":\"4bd7cff3-7315-4abd-8886-e313f3877e67\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"c4de70bc-333e-4643-9764-c71c89f6f3d6\",\"type\":\"LogTicker\"}},\"id\":\"e31e305f-a1c4-43e8-89d5-3917a14ce340\",\"type\":\"Grid\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"#1f77b4\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"size\":{\"units\":\"screen\",\"value\":6},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"36750e7e-d37d-432a-91b6-d4a125fdae84\",\"type\":\"Circle\"},{\"attributes\":{\"line_color\":{\"value\":\"#1f77b4\"},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"b58b35f2-56fb-45d7-93fb-0f85b9dbacac\",\"type\":\"Line\"},{\"attributes\":{\"line_color\":{\"value\":\"orange\"},\"line_dash\":[4,4],\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"c4447fdc-dc1d-4e2a-9301-1c4e37c48364\",\"type\":\"Line\"},{\"attributes\":{\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"84ef1cbb-9276-4542-8a27-22cb1b282a89\",\"type\":\"Line\"},{\"attributes\":{\"data_source\":{\"id\":\"417b7c44-ac42-4c30-8561-6a468f6da924\",\"type\":\"ColumnDataSource\"},\"glyph\":{\"id\":\"012f1acf-b7d0-4b5d-8d13-3e58e3f53de3\",\"type\":\"Circle\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"36750e7e-d37d-432a-91b6-d4a125fdae84\",\"type\":\"Circle\"},\"selection_glyph\":null,\"view\":{\"id\":\"5906f174-73dd-4067-a2b4-af7e571b9a4f\",\"type\":\"CDSView\"}},\"id\":\"d766abcd-0e9a-4b53-bc05-99fe970589cd\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"source\":{\"id\":\"92f9b15d-67c5-46d2-9e41-22c376d57289\",\"type\":\"ColumnDataSource\"}},\"id\":\"2a11fe83-a312-40cf-b9f9-e3622bea6e3b\",\"type\":\"CDSView\"},{\"attributes\":{\"source\":{\"id\":\"417b7c44-ac42-4c30-8561-6a468f6da924\",\"type\":\"ColumnDataSource\"}},\"id\":\"5906f174-73dd-4067-a2b4-af7e571b9a4f\",\"type\":\"CDSView\"},{\"attributes\":{},\"id\":\"a1df3e53-a473-4012-8dea-2a268af97022\",\"type\":\"PanTool\"},{\"attributes\":{\"data_source\":{\"id\":\"92f9b15d-67c5-46d2-9e41-22c376d57289\",\"type\":\"ColumnDataSource\"},\"glyph\":{\"id\":\"b58b35f2-56fb-45d7-93fb-0f85b9dbacac\",\"type\":\"Line\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"cd3bcac2-d7ff-4c97-a577-08e8aadcf156\",\"type\":\"Line\"},\"selection_glyph\":null,\"view\":{\"id\":\"2a11fe83-a312-40cf-b9f9-e3622bea6e3b\",\"type\":\"CDSView\"}},\"id\":\"7d8433fa-ec47-49c7-829d-789df3477441\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"label\":{\"value\":\"y=10^x^2\"},\"renderers\":[{\"id\":\"74e4f9e3-2631-4e31-9397-8d94893b43a3\",\"type\":\"GlyphRenderer\"}]},\"id\":\"113edf9d-6663-4670-8b72-48de2cf439f6\",\"type\":\"LegendItem\"},{\"attributes\":{\"overlay\":{\"id\":\"fbdcd022-baf1-4952-987a-721bce7b6eb8\",\"type\":\"BoxAnnotation\"}},\"id\":\"b60ee604-c8dd-4b5b-ba52-e1f0544e7329\",\"type\":\"BoxZoomTool\"},{\"attributes\":{},\"id\":\"6f346d88-d5b5-4982-b73c-ca1cfd0b520b\",\"type\":\"ResetTool\"},{\"attributes\":{},\"id\":\"b8b3c4a0-cba0-4861-bf70-7e6130f54efd\",\"type\":\"SaveTool\"},{\"attributes\":{\"source\":{\"id\":\"aa8ccede-4daa-4043-a41f-65f0e9bc1f47\",\"type\":\"ColumnDataSource\"}},\"id\":\"52bdcf3a-7a4a-46e3-b31a-b79524dd250c\",\"type\":\"CDSView\"},{\"attributes\":{\"bottom_units\":\"screen\",\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"lightgrey\"},\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":{\"value\":1.0},\"line_color\":{\"value\":\"black\"},\"line_dash\":[4,4],\"line_width\":{\"value\":2},\"plot\":null,\"render_mode\":\"css\",\"right_units\":\"screen\",\"top_units\":\"screen\"},\"id\":\"fbdcd022-baf1-4952-987a-721bce7b6eb8\",\"type\":\"BoxAnnotation\"},{\"attributes\":{\"data_source\":{\"id\":\"aa8ccede-4daa-4043-a41f-65f0e9bc1f47\",\"type\":\"ColumnDataSource\"},\"glyph\":{\"id\":\"c4447fdc-dc1d-4e2a-9301-1c4e37c48364\",\"type\":\"Line\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"8daa7f00-8873-4dd2-90d6-54539695e8cf\",\"type\":\"Line\"},\"selection_glyph\":null,\"view\":{\"id\":\"52bdcf3a-7a4a-46e3-b31a-b79524dd250c\",\"type\":\"CDSView\"}},\"id\":\"74e4f9e3-2631-4e31-9397-8d94893b43a3\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"cd3bcac2-d7ff-4c97-a577-08e8aadcf156\",\"type\":\"Line\"},{\"attributes\":{},\"id\":\"c6181b07-de1e-4e1d-935b-93716b023487\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"label\":{\"value\":\"y=x\"},\"renderers\":[{\"id\":\"7d8433fa-ec47-49c7-829d-789df3477441\",\"type\":\"GlyphRenderer\"},{\"id\":\"b1aeaded-e645-421a-a853-5dc396513ce4\",\"type\":\"GlyphRenderer\"}]},\"id\":\"12f50c68-f116-40b9-9e8c-a4dd8d29acee\",\"type\":\"LegendItem\"},{\"attributes\":{\"data_source\":{\"id\":\"f56a9aa2-4cbf-4e35-8753-64701f78ba4e\",\"type\":\"ColumnDataSource\"},\"glyph\":{\"id\":\"cb54b7bf-6729-491a-b43d-ae41b2e6872d\",\"type\":\"Line\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"84ef1cbb-9276-4542-8a27-22cb1b282a89\",\"type\":\"Line\"},\"selection_glyph\":null,\"view\":{\"id\":\"ed361d61-574a-4864-89e6-b5d7366fc219\",\"type\":\"CDSView\"}},\"id\":\"4d7324c5-3eac-41af-8603-7db2097e8fe4\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"ticker\":null},\"id\":\"9489e73e-091c-473b-a131-092c866f7d7b\",\"type\":\"LogTickFormatter\"},{\"attributes\":{\"callback\":null,\"column_names\":[\"x\",\"y\"],\"data\":{\"x\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0],\"y\":[0.010000000000000002,0.25,1.0,2.25,4.0,6.25,9.0]}},\"id\":\"ab348a7a-8f91-476e-9641-718bee1911d1\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"line_color\":{\"value\":\"#1f77b4\"},\"line_width\":{\"value\":3},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"d2fa1251-6ef2-42fc-8975-cd2ae71c8944\",\"type\":\"Line\"},{\"attributes\":{\"callback\":null,\"column_names\":[\"x\",\"y\"],\"data\":{\"x\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0],\"y\":[1.2589254117941673,3.1622776601683795,10.0,31.622776601683793,100.0,316.22776601683796,1000.0]}},\"id\":\"f56a9aa2-4cbf-4e35-8753-64701f78ba4e\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"fill_color\":{\"value\":\"red\"},\"line_color\":{\"value\":\"red\"},\"size\":{\"units\":\"screen\",\"value\":6},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"012f1acf-b7d0-4b5d-8d13-3e58e3f53de3\",\"type\":\"Circle\"},{\"attributes\":{\"callback\":null,\"column_names\":[\"x\",\"y\"],\"data\":{\"x\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0],\"y\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0]}},\"id\":\"8512259f-c7e6-4437-89a9-2ce9bdd9b5ec\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"#1f77b4\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"size\":{\"units\":\"screen\",\"value\":8},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"110c3c1f-d916-452e-8a22-3abae8a1fd37\",\"type\":\"Circle\"},{\"attributes\":{\"fill_color\":{\"value\":\"white\"},\"line_color\":{\"value\":\"#1f77b4\"},\"size\":{\"units\":\"screen\",\"value\":8},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"a72c53e8-8e87-436d-85d6-236395ed26b4\",\"type\":\"Circle\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_scroll\":\"auto\",\"active_tap\":\"auto\",\"tools\":[{\"id\":\"a1df3e53-a473-4012-8dea-2a268af97022\",\"type\":\"PanTool\"},{\"id\":\"b60ee604-c8dd-4b5b-ba52-e1f0544e7329\",\"type\":\"BoxZoomTool\"},{\"id\":\"6f346d88-d5b5-4982-b73c-ca1cfd0b520b\",\"type\":\"ResetTool\"},{\"id\":\"b8b3c4a0-cba0-4861-bf70-7e6130f54efd\",\"type\":\"SaveTool\"}]},\"id\":\"aadec57c-e610-4fc9-bffe-13bed05a9add\",\"type\":\"Toolbar\"},{\"attributes\":{\"data_source\":{\"id\":\"8512259f-c7e6-4437-89a9-2ce9bdd9b5ec\",\"type\":\"ColumnDataSource\"},\"glyph\":{\"id\":\"a72c53e8-8e87-436d-85d6-236395ed26b4\",\"type\":\"Circle\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"110c3c1f-d916-452e-8a22-3abae8a1fd37\",\"type\":\"Circle\"},\"selection_glyph\":null,\"view\":{\"id\":\"72a417a6-402e-488a-aad4-2e1f21fedaa8\",\"type\":\"CDSView\"}},\"id\":\"b1aeaded-e645-421a-a853-5dc396513ce4\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"below\":[{\"id\":\"c1ce6878-2a2c-4a91-a491-ed7912d38d88\",\"type\":\"LinearAxis\"}],\"left\":[{\"id\":\"33742635-5a5b-4e1d-b244-88d4420489b1\",\"type\":\"LogAxis\"}],\"renderers\":[{\"id\":\"c1ce6878-2a2c-4a91-a491-ed7912d38d88\",\"type\":\"LinearAxis\"},{\"id\":\"9f4a8754-53ec-418e-9fdc-e007c96834bd\",\"type\":\"Grid\"},{\"id\":\"33742635-5a5b-4e1d-b244-88d4420489b1\",\"type\":\"LogAxis\"},{\"id\":\"e31e305f-a1c4-43e8-89d5-3917a14ce340\",\"type\":\"Grid\"},{\"id\":\"fbdcd022-baf1-4952-987a-721bce7b6eb8\",\"type\":\"BoxAnnotation\"},{\"id\":\"0e91750c-d9bb-4c64-b8cb-e3547ab30e52\",\"type\":\"Legend\"},{\"id\":\"7d8433fa-ec47-49c7-829d-789df3477441\",\"type\":\"GlyphRenderer\"},{\"id\":\"b1aeaded-e645-421a-a853-5dc396513ce4\",\"type\":\"GlyphRenderer\"},{\"id\":\"158e9531-0eb3-49c8-b23c-628c4a40505f\",\"type\":\"GlyphRenderer\"},{\"id\":\"4d7324c5-3eac-41af-8603-7db2097e8fe4\",\"type\":\"GlyphRenderer\"},{\"id\":\"d766abcd-0e9a-4b53-bc05-99fe970589cd\",\"type\":\"GlyphRenderer\"},{\"id\":\"74e4f9e3-2631-4e31-9397-8d94893b43a3\",\"type\":\"GlyphRenderer\"}],\"title\":{\"id\":\"6c79a339-12f6-479a-a0a7-793b53963ac5\",\"type\":\"Title\"},\"toolbar\":{\"id\":\"aadec57c-e610-4fc9-bffe-13bed05a9add\",\"type\":\"Toolbar\"},\"x_range\":{\"id\":\"179acec6-b585-413d-9ed6-919ef094240d\",\"type\":\"DataRange1d\"},\"x_scale\":{\"id\":\"ff0c4447-3f1c-4ab1-badb-1731b552974b\",\"type\":\"LinearScale\"},\"y_range\":{\"id\":\"d476e60b-e89c-463c-9beb-08c372c09a29\",\"type\":\"Range1d\"},\"y_scale\":{\"id\":\"9175516d-39f7-47cf-a904-7bc9ff5f153a\",\"type\":\"LogScale\"}},\"id\":\"4bd7cff3-7315-4abd-8886-e313f3877e67\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"callback\":null,\"column_names\":[\"x\",\"y\"],\"data\":{\"x\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0],\"y\":[1.2589254117941673,3.1622776601683795,10.0,31.622776601683793,100.0,316.22776601683796,1000.0]}},\"id\":\"417b7c44-ac42-4c30-8561-6a468f6da924\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"source\":{\"id\":\"8512259f-c7e6-4437-89a9-2ce9bdd9b5ec\",\"type\":\"ColumnDataSource\"}},\"id\":\"72a417a6-402e-488a-aad4-2e1f21fedaa8\",\"type\":\"CDSView\"},{\"attributes\":{\"plot\":null,\"text\":\"log axis example\"},\"id\":\"6c79a339-12f6-479a-a0a7-793b53963ac5\",\"type\":\"Title\"},{\"attributes\":{\"callback\":null},\"id\":\"179acec6-b585-413d-9ed6-919ef094240d\",\"type\":\"DataRange1d\"},{\"attributes\":{\"label\":{\"value\":\"y=x^2\"},\"renderers\":[{\"id\":\"158e9531-0eb3-49c8-b23c-628c4a40505f\",\"type\":\"GlyphRenderer\"}]},\"id\":\"0b5c54d6-fba3-4490-96f3-b5c99831539b\",\"type\":\"LegendItem\"},{\"attributes\":{\"callback\":null,\"column_names\":[\"x\",\"y\"],\"data\":{\"x\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0],\"y\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0]}},\"id\":\"92f9b15d-67c5-46d2-9e41-22c376d57289\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"label\":{\"value\":\"y=10^x\"},\"renderers\":[{\"id\":\"4d7324c5-3eac-41af-8603-7db2097e8fe4\",\"type\":\"GlyphRenderer\"},{\"id\":\"d766abcd-0e9a-4b53-bc05-99fe970589cd\",\"type\":\"GlyphRenderer\"}]},\"id\":\"601c17cb-aaf3-4026-8ff3-e3d5dae4771b\",\"type\":\"LegendItem\"},{\"attributes\":{},\"id\":\"9175516d-39f7-47cf-a904-7bc9ff5f153a\",\"type\":\"LogScale\"},{\"attributes\":{\"source\":{\"id\":\"ab348a7a-8f91-476e-9641-718bee1911d1\",\"type\":\"ColumnDataSource\"}},\"id\":\"10386d51-66b0-43c9-81c2-cec3e07f3ad1\",\"type\":\"CDSView\"},{\"attributes\":{},\"id\":\"ff0c4447-3f1c-4ab1-badb-1731b552974b\",\"type\":\"LinearScale\"},{\"attributes\":{\"data_source\":{\"id\":\"ab348a7a-8f91-476e-9641-718bee1911d1\",\"type\":\"ColumnDataSource\"},\"glyph\":{\"id\":\"d2fa1251-6ef2-42fc-8975-cd2ae71c8944\",\"type\":\"Line\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"bc8d3e0a-7288-4c2d-a02f-989d775e32f6\",\"type\":\"Line\"},\"selection_glyph\":null,\"view\":{\"id\":\"10386d51-66b0-43c9-81c2-cec3e07f3ad1\",\"type\":\"CDSView\"}},\"id\":\"158e9531-0eb3-49c8-b23c-628c4a40505f\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"callback\":null,\"end\":100000000000,\"start\":0.001},\"id\":\"d476e60b-e89c-463c-9beb-08c372c09a29\",\"type\":\"Range1d\"},{\"attributes\":{\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"line_width\":{\"value\":3},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"bc8d3e0a-7288-4c2d-a02f-989d775e32f6\",\"type\":\"Line\"},{\"attributes\":{\"axis_label\":\"particles\",\"formatter\":{\"id\":\"9489e73e-091c-473b-a131-092c866f7d7b\",\"type\":\"LogTickFormatter\"},\"plot\":{\"id\":\"4bd7cff3-7315-4abd-8886-e313f3877e67\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"c4de70bc-333e-4643-9764-c71c89f6f3d6\",\"type\":\"LogTicker\"}},\"id\":\"33742635-5a5b-4e1d-b244-88d4420489b1\",\"type\":\"LogAxis\"},{\"attributes\":{\"plot\":{\"id\":\"4bd7cff3-7315-4abd-8886-e313f3877e67\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"b5d3fe81-46e7-41f9-8ee2-bddf1740659b\",\"type\":\"BasicTicker\"}},\"id\":\"9f4a8754-53ec-418e-9fdc-e007c96834bd\",\"type\":\"Grid\"},{\"attributes\":{\"axis_label\":\"sections\",\"formatter\":{\"id\":\"c6181b07-de1e-4e1d-935b-93716b023487\",\"type\":\"BasicTickFormatter\"},\"plot\":{\"id\":\"4bd7cff3-7315-4abd-8886-e313f3877e67\",\"subtype\":\"Figure\",\"type\":\"Plot\"},\"ticker\":{\"id\":\"b5d3fe81-46e7-41f9-8ee2-bddf1740659b\",\"type\":\"BasicTicker\"}},\"id\":\"c1ce6878-2a2c-4a91-a491-ed7912d38d88\",\"type\":\"LinearAxis\"},{\"attributes\":{},\"id\":\"b5d3fe81-46e7-41f9-8ee2-bddf1740659b\",\"type\":\"BasicTicker\"},{\"attributes\":{\"callback\":null,\"column_names\":[\"x\",\"y\"],\"data\":{\"x\":[0.1,0.5,1.0,1.5,2.0,2.5,3.0],\"y\":[1.023292992280754,1.7782794100389228,10.0,177.82794100389228,10000.0,1778279.410038923,1000000000.0]}},\"id\":\"aa8ccede-4daa-4043-a41f-65f0e9bc1f47\",\"type\":\"ColumnDataSource\"}],\"root_ids\":[\"4bd7cff3-7315-4abd-8886-e313f3877e67\"]},\"title\":\"Bokeh Application\",\"version\":\"0.12.7\"}};\n",
       "            var render_items = [{\"docid\":\"38028149-2e35-4386-8984-d2e61a361246\",\"elementid\":\"76074380-5631-4022-83d2-aa1ea9b5e742\",\"modelid\":\"4bd7cff3-7315-4abd-8886-e313f3877e67\"}];\n",
       "            \n",
       "            Bokeh.embed.embed_items(docs_json, render_items);\n",
       "          };\n",
       "          if (document.readyState != \"loading\") fn();\n",
       "          else document.addEventListener(\"DOMContentLoaded\", fn);\n",
       "        })();\n",
       "      },\n",
       "      function(Bokeh) {\n",
       "      }\n",
       "    ];\n",
       "  \n",
       "    function run_inline_js() {\n",
       "      \n",
       "      if ((root.Bokeh !== undefined) || (force === true)) {\n",
       "        for (var i = 0; i < inline_js.length; i++) {\n",
       "          inline_js[i].call(root, root.Bokeh);\n",
       "        }if (force === true) {\n",
       "          display_loaded();\n",
       "        }} else if (Date.now() < root._bokeh_timeout) {\n",
       "        setTimeout(run_inline_js, 100);\n",
       "      } else if (!root._bokeh_failed_load) {\n",
       "        console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n",
       "        root._bokeh_failed_load = true;\n",
       "      } else if (force !== true) {\n",
       "        var cell = $(document.getElementById(\"76074380-5631-4022-83d2-aa1ea9b5e742\")).parents('.cell').data().cell;\n",
       "        cell.output_area.append_execute_result(NB_LOAD_WARNING)\n",
       "      }\n",
       "  \n",
       "    }\n",
       "  \n",
       "    if (root._bokeh_is_loading === 0) {\n",
       "      console.log(\"Bokeh: BokehJS loaded, going straight to plotting\");\n",
       "      run_inline_js();\n",
       "    } else {\n",
       "      load_libs(js_urls, function() {\n",
       "        console.log(\"Bokeh: BokehJS plotting callback run at\", now());\n",
       "        run_inline_js();\n",
       "      });\n",
       "    }\n",
       "  }(window));\n",
       "</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "W-1001 (NO_DATA_RENDERERS): Plot has no data renderers: Figure(id='f73e874f-3877-4c58-9c17-65fa213197c5', ...)\n"
     ]
    }
   ],
   "source": [
    "#Multiple glyphs on one plot\n",
    "from bokeh.plotting import figure, output_file, show\n",
    "\n",
    "#prepare some data\n",
    "x = [0.1, 0.5, 1.0, 1.5, 2.0, 2.5, 3.0]\n",
    "y0 = [i**2 for i in x]\n",
    "y1 = [10**i for i in x]\n",
    "y2 = [10**(i**2) for i in x]\n",
    "\n",
    "# output to static HTML file\n",
    "output_file(\"Output//2_1-log_lines.html\")\n",
    "\n",
    "# create a new plot\n",
    "p = figure(\n",
    "   tools=\"pan,box_zoom,reset,save\",\n",
    "   y_axis_type=\"log\", y_range=[0.001, 10**11], title=\"log axis example\",\n",
    "   x_axis_label='sections', y_axis_label='particles'\n",
    ")\n",
    "\n",
    "# add some renderers\n",
    "p.line(x,x,legend=\"y=x\")\n",
    "p.circle(x,x,legend=\"y=x\",fill_color=\"white\",size=8)\n",
    "p.line(x, y0, legend=\"y=x^2\", line_width=3)\n",
    "p.line(x, y1, legend=\"y=10^x\", line_color=\"red\")\n",
    "p.circle(x, y1, legend=\"y=10^x\", fill_color=\"red\", line_color=\"red\", size=6)\n",
    "p.line(x, y2, legend=\"y=10^x^2\", line_color=\"orange\", line_dash=\"4 4\")\n",
    "\n",
    "# show the results\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## More Examples"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Vectorized colors and sizes 矢量化颜色和大小"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "W-1001 (NO_DATA_RENDERERS): Plot has no data renderers: Figure(id='cd25fe5f-d8ed-4c9f-96a3-ecee04c4a070', ...)\n"
     ]
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "['#785196', '#37cf96', '#53ab96', '#6d7896', '#a31f96', '#bab296', '#3d4d96', '#819f96', '#38d796', '#829796']\n"
     ]
    }
   ],
   "source": [
    "import numpy as np\n",
    "from bokeh.plotting import figure, output_file, show\n",
    "\n",
    "#prepare some dat\n",
    "N=4000\n",
    "x=np.random.random(size=N)*100    \n",
    "y=np.random.random(size=N)*100\n",
    "radii=np.random.random(size=N)*1.5\n",
    "#根据x,y值，生产颜色变量; 02x表示2位的16进制值\n",
    "colors=[\n",
    "    \"#%02x%02x%02x\" % (int(r),int(g),150) for r,g in zip(50+2*x,30+2*y)\n",
    "]\n",
    "print(colors[:10])\n",
    "\n",
    "#output to static HTML file(with CDN resources)\n",
    "output_file(\"Output//2_2-color_scatter.html\",title=\"color_scatter.py example\",mode=\"cdn\")\n",
    "#定义工具标签\n",
    "TOOLS=\"crosshair,pan,wheel_zoom,box_zoom,reset,box_select,lasso_select\"\n",
    "\n",
    "#create a new plot with tools above, and explicit ranges\n",
    "p=figure(tools=TOOLS,x_range=(0,100),y_range=(0,100))\n",
    "\n",
    "# add a circle renderer with vectorized colors and sizes\n",
    "p.circle(x,y,radius=radii, fill_color=colors, fill_alpha=0.6, line_color=\"black\")\n",
    "\n",
    "#show the resutls\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Linked Panning and brushing"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 39,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "W-1001 (NO_DATA_RENDERERS): Plot has no data renderers: Figure(id='cd25fe5f-d8ed-4c9f-96a3-ecee04c4a070', ...)\n"
     ]
    }
   ],
   "source": [
    "#Linked Panning\n",
    "\n",
    "import numpy as np\n",
    "from bokeh.layouts import gridplot\n",
    "from bokeh.plotting import figure,output_file,show\n",
    "\n",
    "#prepare some data\n",
    "N=100\n",
    "#在指定的间隔内返回均匀间隔的数字，详见help(\"numpy.linspace\")\n",
    "x=np.linspace(0,4*np.pi,N)    \n",
    "y0=np.sin(x)\n",
    "y1=np.cos(x)\n",
    "y2=np.sin(x)+np.cos(x)\n",
    "\n",
    "#output to static HTML file\n",
    "output_file(\"Output//2_2-linked_panning.html\")\n",
    "\n",
    "#create a new plot\n",
    "s1=figure(width=250,plot_height=250,title=\"s1\")\n",
    "s1.circle(x,y0,size=10,color=\"navy\",alpha=0.5)\n",
    "\n",
    "#New: create a new plot and share both ranges\n",
    "s2=figure(width=250,height=250,x_range=s1.x_range,y_range=s1.y_range,title=\"s2\")\n",
    "s2.triangle(x,y1,size=10,color=\"firebrick\",alpha=0.5)\n",
    "\n",
    "#New: create a new plot and only one range\n",
    "s3=figure(width=250,height=250,x_range=s1.x_range,title=\"s3\")\n",
    "s3.square(x,y2,size=10,color=\"olive\",alpha=0.5)\n",
    "\n",
    "#New: Put the subplots in a gridplot\n",
    "p=gridplot([[s1,s2,s3]],toolbar_location=None)\n",
    "\n",
    "#show the results\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "E-1001 (BAD_COLUMN_NAME): Glyph refers to nonexistent column name: y2 [renderer: GlyphRenderer(id='3e9fe743-8c22-4b96-8789-886dede651c5', ...)]\n"
     ]
    }
   ],
   "source": [
    "#linked brushing\n",
    "\n",
    "import numpy as np\n",
    "from bokeh.plotting import *\n",
    "from bokeh.models import ColumnDataSource\n",
    "\n",
    "#prepare some date\n",
    "N=300\n",
    "x=np.linspace(0,4*np.pi,N)\n",
    "y0=np.sin(x)\n",
    "y1=np.cos(x)\n",
    "y2=np.tan(x)\n",
    "\n",
    "#output to static HTML file\n",
    "output_file(\"Output//2_2-linked_brushing.html\")\n",
    "\n",
    "#New: create a column data source for the plots to share\n",
    "#ColumnDataSource可参见 |https://yq.aliyun.com/articles/645338|\n",
    "source=ColumnDataSource(data=dict(x=x,y0=y0,y1=y1,y2=y2))\n",
    "TOOLS=\"pan,wheel_zoom,box_zoom,reset,save,box_select,lasso_select\"\n",
    "\n",
    "#create a new plot and add a renderer\n",
    "left=figure(tools=TOOLS,width=350,height=350,title=\"sin\")\n",
    "left.circle(x='x',y='y0',source=source)\n",
    "\n",
    "#用ColumnDataSource引用数据，需引用'标题列'\n",
    "\n",
    "#create another new plot and add a renderer\n",
    "right=figure(tools=TOOLS,width=350,height=350,title=\"cos\")\n",
    "right.circle(x='x',y='y1',source=source)\n",
    "\n",
    "#增加一个新的图表并添加数据\n",
    "middle=figure(tools=TOOLS,width=350,height=350,title=\"tan\")\n",
    "middle.circle(x='x',y='y2',source=source,color=\"orange\",alpha=0.5)\n",
    "\n",
    "#put the subplots in a gridplot\n",
    "p = gridplot([[left,middle,right]])\n",
    "\n",
    "# show the results\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Datetime axes 时间轴"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "\n",
    "from bokeh.plotting import figure, output_file,show\n",
    "from bokeh.sampledata.stocks import AAPL\n",
    "\n",
    "#prepare some data(从sampledata获取)\n",
    "aapl=np.array(AAPL['adj_close'])\n",
    "aapl_dates=np.array(AAPL['date'],dtype=np.datetime64)\n",
    "\n",
    "window_size=30\n",
    "window=np.ones(window_size)/float(window_size)\n",
    "#numpy.convole:离散线性卷积,详见 https://docs.scipy.org/doc/numpy/reference/generated/numpy.convolve.html\n",
    "aapl_avg=np.convolve(aapl,window,'same')\n",
    "\n",
    "#output to static HTML file\n",
    "output_file(\"Output//2_2-stocks.html\",title=\"stocks.py example\")\n",
    "\n",
    "#create a new plot iwth a datetime axis type\n",
    "p=figure(plot_width=800,plot_height=350,x_axis_type=\"datetime\")\n",
    "\n",
    "#add renderers\n",
    "p.circle(aapl_dates,aapl,size=4,color='darkgrey',alpha=0.2,legend='close')\n",
    "p.line(aapl_dates,aapl_avg,color='navy',legend='avg')\n",
    "\n",
    "#New: customize by setting attributes\n",
    "p.title.text=\"AAPL One-Month Average\"   \n",
    "p.legend.location=\"top_left\"            \n",
    "p.grid.grid_line_alpha=0.5\n",
    "p.xaxis.axis_label='Date'\n",
    "p.yaxis.axis_label='Price'\n",
    "p.ygrid.band_fill_color=\"olive\"\n",
    "p.ygrid.band_fill_alpha=0.1\n",
    "\n",
    "#show results\n",
    "show(p)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
